@use './variables';

@function getCalc($px) {
  $designs: $px + px;
  @return calc(100% - #{$designs});
}

$design: 0.0625;
$unit: rem;
@function px2rem($px) {
  @return $px * $design + $unit;
}

$pixelBegin1: 0;
$pixelEnd1: 500;
@for $i from $pixelBegin1 through $pixelEnd1 {
  .width-#{$i} {
    width: px2rem($i) !important;
  }
  .minwidth-#{$i} {
    min-width: px2rem($i) !important;
  }
  .maxwidth-#{$i} {
    max-width: px2rem($i) !important;
  }
}

@for $i from 1 through 100 {
  @if $i > 0 {
    .width-calc-#{$i} {
      width: getCalc($i) !important;
    }
  }
}
@for $i from 1 through 100 {
  @if $i > 0 {
    .height-calc-#{$i} {
      height: getCalc($i) !important;
    }
  }
}


@for $i from $pixelBegin1 through $pixelEnd1 {
  .height-#{$i} {
    height: px2rem($i) !important;
  }
  .min-height-#{$i} {
    min-height: px2rem($i) !important;
  }
  .max-height-#{$i} {
    max-height: px2rem($i) !important;
  }
}



.fill-all{
  width: 100%;
  height: 100%;
  flex: 1;
}

.fill-height {
  height: 100%;
}

.fill-width {
  width: 100%;
}
.width-per-100 {
  width: 100% !important;
}
.height-per-100 {
  height: 100% !important;
}
.width-auto {
  width: auto !important;
}
.min-width-auto {
  min-width: auto !important;
}
.max-width-auto {
  max-width: auto !important;
}

.height-auto {
  height: auto !important;
}
.min-height-auto {
  min-height: auto !important;
}
.max-height-auto {
  max-height: auto !important;
}

